<template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        @close="handleClose"
        width="30%"
        v-dialogDrag
        append-to-body
    >
        <el-form
            ref="formRef"
            :model="formData"
            v-loading="formLoading"
            label-width="100px"
        >
            <el-form-item
                label="域名"
                prop="domainId"
                :rules="[
                    { required: true, message: '请选择域名', trigger: 'blur' },
                ]"
            >
                <el-select
                    v-model="formData.domainId"
                    style="width: 100%"
                    filterable
                    placeholder="请选择域名"
                >
                    <el-option
                        v-for="(item, index) in domainList"
                        :key="index"
                        :label="item.domain"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="链接Url"
                prop="linkUrl"
                v-if="!isEdit"
                :rules="[
                    {
                        required: true,
                        message: '请输入链接Url',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-input
                    v-model="formData.linkUrl"
                    placeholder="请输入链接Url"
                    :disabled="disabledLinkUrl"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-edit"
                        @click="disabledLinkUrl = !disabledLinkUrl"
                    ></el-button>
                </el-input>
            </el-form-item>
            <el-form-item
                label="链接Url"
                prop="linkUrl"
                v-else
                :rules="[
                    {
                        required: true,
                        message: '请输入链接Url',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-input
                    v-model="formData.linkUrl"
                    placeholder="请输入链接Url"
                    :disabled="true"
                >
                    <el-button icon="el-icon-edit"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="链接描述" prop="linkDescription">
                <el-input
                    v-model="formData.linkDescription"
                    placeholder="请输入链接描述"
                />
            </el-form-item>
            <el-form-item label="IP访问限制" prop="ipAccessRestriction">
                <el-radio v-model="formData.ipAccessRestriction" :label="1"
                    >开启</el-radio
                >
                <el-radio v-model="formData.ipAccessRestriction" :label="0"
                    >关闭</el-radio
                >
            </el-form-item>
            <el-form-item label="允许访问国家" prop="visitingCountries">
                <el-select
                    v-model="formData.visitingCountries"
                    style="width: 100%"
                    multiple
                    placeholder="请选择允许访问国家"
                >
                    <el-option
                        v-for="(item, index) in countryList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="随机打乱" prop="random">
                <el-radio v-model="formData.random" :label="1">开启</el-radio>
                <el-radio v-model="formData.random" :label="0">关闭</el-radio>
            </el-form-item>
            <el-form-item label="问候语" prop="greetings">
                <el-input
                    v-model="formData.greetings"
                    placeholder="请输入问候语"
                />
            </el-form-item>
            <el-form-item label="安全页地址" prop="securityPageUrl">
                <el-input
                    v-model="formData.securityPageUrl"
                    placeholder="请输入安全页地址"
                />
            </el-form-item>
            <el-form-item label="安全页开关" prop="securityPageSwitch">
                <el-radio v-model="formData.securityPageSwitch" :label="1"
                    >开启</el-radio
                >
                <el-radio v-model="formData.securityPageSwitch" :label="0"
                    >关闭</el-radio
                >
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm"
                :disabled="formLoading"
                >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addLinks, editLinks } from "@/api/links/index";
import { getDomainList } from "@/api/domain";
export default {
    data() {
        return {
            // 弹出层标题
            dialogTitle: "",
            // 是否显示弹出层,
            dialogVisible: false,
            formLoading: false,
            disabledLinkUrl: true,
            isEdit: false,
            formData: {
                domain: "",
                linkUrl: "",
                linkDescription: "",
                ipAccessRestriction: 0,
                random: 0,
                greetings: "",
                status: 1,
                visitingCountries: "",
                securityPageUrl: "",
                securityPageSwitch: 0,
            },
            domainList: [],
        };
    },
    methods: {
        generateSecureShortUUID() {
            const array = new Uint8Array(4); // 4 bytes = 32 bits
            window.crypto.getRandomValues(array);
            // 将Uint8Array转换为36进制字符串，确保长度为8位
            let uuid = Array.from(array, (x) => x.toString(36).padStart(2, "0"))
                .join("")
                .toUpperCase()
                .slice(0, 8);
            // 确保长度为8位，不足8位时补零
            while (uuid.length < 8) {
                uuid = "0" + uuid;
            }
            return uuid;
        },
        /** 打开弹窗 */
        async open(row) {
            this.dialogVisible = true;
            // 修改时，设置数据
            this.isEdit = false;
            if (row.id) {
                this.dialogTitle = "修改链接";
                this.formData = { ...this.formData, ...row };
                this.isEdit = true;
            } else {
                (this.disabledLinkUrl = true),
                    (this.formData.linkUrl = this.generateSecureShortUUID());
                this.dialogTitle = "新增链接";
            }
        },

        async getDomains() {
            const res = await getDomainList({
                pageNo: 1,
                pageSize: 3000,
                status: 1,
            });
            if (res.code === 0) {
                this.domainList = res.data.list;
            }
        },
        /** 提交按钮 */
        async submitForm() {
            // 校验主表
            await this.$refs["formRef"].validate();
            this.formLoading = true;
            try {
                const data = this.formData;
                // 修改的提交
                if (data.id) {
                    await editLinks(data);
                    this.$modal.msgSuccess("修改成功");
                    this.dialogVisible = false;
                    this.$emit("success");
                    return;
                }
                // 添加的提交
                await addLinks(data);
                this.$modal.msgSuccess("新增成功");
                this.dialogVisible = false;
                this.$emit("success");
            } finally {
                this.formLoading = false;
            }
        },

        /** 表单重置 */
        reset() {
            this.formData = {
                domain: "",
                linkUrl: "",
                linkDescription: "",
                ipAccessRestriction: 0,
                random: 0,
                greetings: "",
                status: 1,
                visitingCountries: "",
                securityPageUrl: "",
                securityPageSwitch: 0,
            };
            this.resetForm("formRef");
        },
        handleClose() {
            this.reset();
        },
    },
    created() {
        this.getDomains();
    },
};
</script>
